<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				// 获取box1
				var box1 = document.getElementById("box1");
				// 获取btn01
				var btn01 = document.getElementById("btn01");
				// 获取btn02
				var btn02 = document.getElementById("btn02");
				// 定义一个变量,用来保存定时器的标识
				var timer;
				// 点击按钮以后,使box1向右移动(left值增大)
				btn01.onclick = function(){				
					move(box1,800,10);					
				};
				
				// 点击按钮以后,使box1向左移动(left值减小)
				btn02.onclick = function(){					
					move(box1,0,-10);				
				};
			};
			
			// 定义一个变量,用来保存定时器的标识
			var timer;
			
			// 尝试创建一个可以执行简单动画的函数
			// 参数: obj:要执行动画的对象 target:执行动画的目标位置 speed:移动的速度(正数向右移动，负数向左移动)
			function move(obj,target,speed){
				// 关闭上一个定时器
				clearInterval(timer);
				
				// 获取元素目前的位置
				var current = parseInt(getStyle(obj,"left"));
				
				// 判断速度的正负值
				// 如果从0向800移动,则speed为正
				// 如果从800向0移动,则speed为负
				if(current > target){
					speed = -speed;
				}
				
				// 开启一个定时器,用来执行动画效果
				timer = setInterval(function(){
					// 获取box1的原理的left值
					var oldValue = parseInt(getStyle(obj,"left"));		
					
					// 在旧值的基础上增加
					var newValue = oldValue + speed;
					
					// 判断newValue是否大于800
					// 从800向0移动
					// 向左移动时,需要判断newValue是否小于target
					// 向右移动时,需要判断newValue是否大于target
					if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
						newValue = target;
					}
					
					// 将新值设置为box1
					obj.style.left = newValue + "px";
					
					// 当元素移动到800px时,使其停止执行动画
					if(newValue == target){
						// 到达目标,关闭定时器
						clearInterval(timer);
					}
					
				},30);
			};
			
			function getStyle(obj,name){
				if(window.getComputedStyle){
					// 正常浏览器的方式,具有getComputedStyle方法
					return getComputedStyle(obj,null)[name];					
				}else{
					// IE8的方式,没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
			};
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box2向左移动</button>
		<br/><br/>
		<div id="box1"></div>
		<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;"></div>
	</body>
</html>
